import { GameObject, RESOURCE_TYPE, resource, LOAD_EVENT, Scene, ResourceBase } from '@eva/eva.js'
import { Img, ImgSystem } from '@eva/plugin-renderer-img'
import { LoadingResource } from "./resourceConst"

export interface LoadingScreenInterface {
    scene: Scene;
    init(): Promise<void>;
    loaded(resource: ResourceBase[]): Promise<void>;
}
export class LoadingScreen implements LoadingScreenInterface {
    public scene: Scene;
    private progressBar: GameObject;

    public async init(): Promise<void> {
        await this.loadResource();
        this.initView();
    }

    public loaded(resourceArr: ResourceBase[]): Promise<void> {
        return new Promise((resolve) => {
            resource.addResource(resourceArr);
            resource.preload();
            resource.on(LOAD_EVENT.PROGRESS, (parent) => {
                console.log('parent', parent.progress)
                this.progressBar.transform.size.width = parent.progress * 611;
            })
            resource.on(LOAD_EVENT.COMPLETE, () => {
                resolve();
            })
        })

    }
    private initView() {
        this.scene = new Scene('loading', {
            size: { width: 750, height: 1334 },
        });
        // 创建 game object
        const bgImage = new GameObject('bgImage', {
            size: { width: 750, height: 1334 },
        })
        bgImage.addComponent(
            new Img({
                resource: 'img1'
            })
        )
        this.scene.addChild(bgImage);
        const progressBox = new GameObject('progressBox', {
            size: { width: 611, height: 31 },
            origin: { x: 0.5, y: 0.5 },
            position: { x: 0, y: 0 },
            anchor: { x: 0.5, y: 0.6 }
        })
        this.scene.addChild(progressBox);
        const progress = new GameObject('progress', {
            size: { width: 611, height: 31 },
            origin: { x: 0, y: 0.5 },
            anchor: { x: 0, y: 0.5 }
        })
        progress.addComponent(
            new Img({
                resource: 'img2'
            })
        )
        progressBox.addChild(progress)

        const progressBar = new GameObject('progressBar', {
            size: { width: 0, height: 17 },
            origin: { x: 0, y: 0.5 },
            anchor: { x: 0, y: 0.45 }
        })
        progressBar.addComponent(
            new Img({
                resource: 'img3'
            })
        )
        progressBox.addChild(progressBar);
        this.progressBar = progressBar;

        const logoImg = new GameObject('logoImg', {
            size: { width: 250, height: 200 },
            origin: { x: 0.5, y: 0.5 },
            anchor: { x: 0.5, y: 0.3 }
        })
        logoImg.addComponent(
            new Img({
                resource: 'logo'
            })
        )
        this.scene.addChild(logoImg);
    }
    private loadResource(): Promise<void> {
        return new Promise((resolve) => {
            resource.addResource(LoadingResource)
            resource.preload()
            resource.on(LOAD_EVENT.COMPLETE, () => {
                resolve();
            })
        })

    }
}